<page-home>
    <page>
        <yield to="title">
            <span class="icon is-middle"><i class="fa fa-home is-right-5"></i></span>Home
        </yield>
        <yield to="menu">
            <div class="tabs is-boxed" style="margin:10px 20px 0;">
                <ul class="is-left">
                    <li class="{'is-active': parent.index===0}" onclick="{ parent.change(0) }">
                        <a>Intro</a></li>
                    <li class="{'is-active': parent.index===1}" onclick="{ parent.change(1) }">
                        <a>Layout</a></li>
                    <li class="{'is-active': parent.index===2}" onclick="{ parent.change(2) }">
                        <a>Components</a></li>
                </ul>
            </div>
        </yield>
        <yield to="content">
            <div class="tabs-content-container">
                <div class="fade" show="{ index===0 }">
                    <div class="tile is-ancestor">
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-normal">
                                <div class="content">
                                    <p class="title">RIOT-Bulma</p>
                                    <p class="subtitle">Light-weight Admin UI</p>
                                    <p>combine RIOT and Bulma to a super weapon</p>
                                    <h3><a href="http://bulma.io/" target="_blank">Bulma</a></h3>
                                    <p>A modern CSS framework based on Flexbox</p>
                                    <h3><a href="http://riotjs.com" target="_blank">RIOT</a></h3>
                                    <p>Simple and elegant component-based UI library</p>
                                    <div class="content">
                                        <!-- Content -->
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="fade" show="{ index===1 }">
                    <div class="tile is-ancestor">
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-normal">
                                <div class="content">
                                    <p class="title">Flex Layout</p>
                                    <p class="subtitle">Magic tiles</p>
                                    <p>A single element for a Metro UI CSS grid</p>
                                    <div class="content">
                                        <!-- Content -->
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="tile is-ancestor">
                        <div class="tile is-vertical is-8">
                            <div class="tile">
                                <div class="tile is-parent is-vertical">
                                    <article class="tile is-child notification is-primary">
                                        <p class="title">Vertical...</p>
                                        <p class="subtitle">Top tile</p>
                                    </article>
                                    <article class="tile is-child notification is-warning">
                                        <p class="title">...tiles</p>
                                        <p class="subtitle">Bottom tile</p>
                                    </article>
                                </div>
                                <div class="tile is-parent">
                                    <article class="tile is-child notification is-info">
                                        <p class="title">Middle tile</p>
                                        <p class="subtitle">With an image</p>
                                        <figure class="image is-4by3">
                                            <img src="http://placehold.it/640x480">
                                        </figure>
                                    </article>
                                </div>
                            </div>
                            <div class="tile is-parent">
                                <article class="tile is-child notification is-danger">
                                    <p class="title">Wide tile</p>
                                    <p class="subtitle">Aligned with the right tile</p>
                                    <div class="content">
                                        <!-- Content -->
                                    </div>
                                </article>
                            </div>
                        </div>
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-success">
                                <div class="content">
                                    <p class="title">Tall tile</p>
                                    <p class="subtitle">With even more content</p>
                                    <div class="content">
                                        <!-- Content -->
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="fade" show="{ index===2 }">
                    <div class="tile is-ancestor">
                        <div class="tile is-parent">
                            <article class="tile is-child notification is-normal">
                                <div class="content">
                                    <p class="title">Components</p>
                                    <p class="subtitle">Modal, Toast, Preloader, Charts, etc.</p>
                                    <p>Well designed reusable riot based components</p>
                                    <div class="content">
                                        <!-- Content -->
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </yield>
    </page>
    <script>
        import '../components/page/page.html'
        this.index = 0
        this.change = (index) => {
            return (e)=>{
                e.preventDefault()
                this.index = index
                this.update()
            }
        }
    </script>
</page-home>